\chapter{Interface Viewpoint}
\label{cap:InterfaceViewpoint}  

\section{Web Client User Interface}
In this section we briefly describe the user interface design through  presenting a UX(Ueser eXperience) diagram. This kind of diagram, as the name suggest, highlights the effect of the users' action in terms of data and pages representation and how they interface with the application logic through forms.
we didn't strictly follow the UX diagram semantic, but we decided for a freer representation, which is more compact and efficient, in order to obtain a better result. Where needed we specify in the diagram itself  where the semantic was not consistent with the UX one.


The diagram already contains explanatory notes the qualify the meaning of the various components; however it's possible to give in this section a view of the main components of the diagram.
We represented the main areas of the web site: the administrative area, the friends' page, the mail box, the add ability and registration page.

Particular attention should be paid to the research pages: they are not actually pages but they represent tool-bars present in every page (as the dollar denotes), that have a partially autonomous behavior in the context where they work.

\subsection{UX Parts}
The purple blocks represent something which should be taken from the database, the light blue blocks represent the form wich will appear in our application in order to make the user to interact with the system, the blue block represent the screens, something that probably will end to be a page once the site is implemented.

In some cases we put '\dots' in the form attributes; this mean that the form field are obvious in the context they are.

Every raw in the diagram represents a transition between pages or more generally (non everything expressed as screen will necessary be a page) a transition between functionalities.



\begin{figure}[htbp]
	\centering 
	\includegraphics[scale = 0.32, angle = 90]{images/UXModel.pdf}
	\caption{UX Diagram of the Web application \label{fig:uxdiagram}}
\end{figure}
\newpage
\subsection{Pages MockUp}

In this section we'll present some example of the pages we are about to implement. In here we want to give a more realistic idea of what the page will look like when implemented; once againthis mockup are not exactlty what you'll find in the real web site, but something very close to it.

\subsubsection{Home Page}

The site home page is the one you enter when you are not logged in. In the home page you can sing-up or register and of cours you can look for people in the system as a guest. Notice that the search tool is not a page but a toolbar.
Once a user logs in, this home page is no more reachable since the user logs out.
Once logged the home page of the user will be his personal page (not shown in these mockups).

\begin{center}
\begin{figure}[h]
        \includegraphics[scale=0.4]{images/pages_mockup/HomePageSwimv2}
        \caption{Home Page Mockup}
\end{figure}
\end{center}

\newpage
\subsubsection{Friend's Page}

This page can be reachable by all the user, by doing a research among friends or a general one, the different is that a guest will not have the same functionalities activated on this page for exaple he will not be able to send a help request in a forma way (that is by clicking on the Help Request button).
Still notice that the search tools is still a toolbar and not a page!

\begin{center}
\begin{figure}[h]
        \includegraphics[scale=0.4]{images/pages_mockup/friendpageswimv2}
        \caption{Friend's Page Mockup}
\end{figure}
\end{center}

\newpage
\subsubsection{My Friends Page}
This page is reached from the user personal page. This page will show a set of the user's friends and there will be a tool bar specialized in friends search, that to say that what is typed there will end in a research of a user by looking in the user's friend.
Notice that it's different from a general research! In fact we still have a general search tool.

\begin{center}
\begin{figure}[h]
        \includegraphics[scale=0.4]{images/pages_mockup/MyfriendsPage}
        \caption{My Friends Page Mockup}
\end{figure}
\end{center}